<template>
    <div class="cb">
        <div class="cba">
            <textarea name="pinglun"
            rows="3" 
            maxlength="150" 
            autofocus 
            class="textareacss"
            placeholder="最多评论150个字符"
            v-model="pinglunvlu">
            </textarea>
        </div>
        <div>

        </div>
        <div class="caozuo">
            <div class="biaoqing">
                <a href="javascript:;">
                    <img src="./imgall/face.png" alt="" />
                    <span>添加表情</span>
                </a>
            </div>
            <button class="pinglun" @click="postacomment">评论</button>
        </div>
        <hr>
        <div v-if="commbox.length">
            <div class="cc" v-for="(item,index) of commbox" :key="index">
                <div  class="ccimage">
                    <a href="javascript:;">
                        <!-- <img :src="'./imgall/'+item.userimage" alt="" /> -->
                        <img :src="`${item.userimage}`" alt="" />
                        <span>{{item.username}}:</span>
                    </a>
                </div>
                <div class="ccinner">
                    <!-- 评论内容 -->
                    {{item.content}}
                </div>
            </div>
        </div>
        <div class="dd" v-else>暂无评论</div>
    </div>
</template>

<style scoped>
.cb .pinglun{
    width: 120px;
    border: 0;
    outline: none;
    border-radius: 10px;
    background-color: #bfbfbf;
}




.cb .cc{
    margin: auto;
    padding-bottom: 30px;
    padding-top: 50px;
    width: 800px;
}
.cb .dd{
    margin: auto;
    padding-bottom: 30px;
    padding-top: 50px;
    width: 800px;
}
.cb .cc a>img{
    width: 60px;
    height: 60px;
    border-radius: 25%;
    /* 保持原始图片的比例超出部分剪切 */
    object-fit:cover;
}
.cb .cc a{
    display: flex;
}
.cb .cc div>a>span{
    align-self: center;
}
.cb .ccinner{
    padding-top: 20px;
}






.cb .pinglun:hover{
    background-color: #e8e8e8;
}
.cb .pinglun:active{
    color: #bfbfbf;
}

.cb .huizan button{
    width: 30px;
    height: 30px;
    margin-right: 5px;
    border: 0;
    outline: none;
    background-color: #fff;
}
.cb .huizan{
    display: flex;
    justify-content: center;
    align-items: center;
}
.cb a{
    text-decoration: none;
    color: #000;
}
.cb .biaoqing>a{
    display: flex;
    align-items: center;
}
.cb .caozuo{
    margin: auto;
    padding-top: 50px;
    width: 800px;
    display: flex;
    justify-content: space-between;
}
.cb .cba .textareacss{
    width: 100%;
    resize: none;
    border: none;
    padding: 0;
    overflow: hidden; 
    border-radius: 5px;
    outline: none;
    border:1px solid #bfbfbf;
    color:#000;
    padding-left:10px;
    font-size:16px;
}
.cb .cba{
    margin: auto;
    padding-top: 50px;
    width: 800px;
    display: flex;
    justify-content: center;
}
</style>

<script>
export default {
    data(){
        return {
            //后续实现未登录不能评论功能
            //储存服务器返回的评论数据
            commbox:[],
            //评论框内容双向绑定
            pinglunvlu:"",
            //提交评论时应获取到当前页面登录的username要知道谁评论的
            //假设当前用户名为“迟梦”服务器将查询他在数据表中的ID
            username:'迟梦'
        }
    },
    mounted(){
        //向服务器发请求获取评论信息  并把获取到的数据存入commbox数组中
        this.axios.get('/commall').then(res=>{
            let data=res.data.results;
            //遍历data数组实现图片动态加载
            data.forEach(item => {
                //属性重新赋值
                item.userimage=require('./imgall/'+item.userimage);
            });

            this.commbox=data;
        })
    },
    methods:{
        postacomment(){
            //axios.defaults.baseURL="http//xx.xx.com";
            //获取服务器端数据
            //axios.get("路由/xx").then(result=>{console.log(result.data);})
            //获取的存入xx变量中用于传递给服务器
            let xx=this.pinglunvlu;
            //现在要做个判断
            //如果获取到的value不为空就向后台发送数据
            if(xx.length != 0 ){
                //提交给服务器->数据库->储存
                console.log("用户:"+this.username+"输入评论内容为:"+xx+";现在将此数据传递给服务器......");
                //post请求提交评论数据
                this.axios.post('/commvalue','username='+this.username+'&userx='+this.pinglunvlu).then(res=>{
                    if(res.data.code==1){
                        //如果评论提交成功重新加载当前界面
                        location.reload()
                    }else{
                        //如果数据库中不存在该用户跳转到注册界面
                        this.$router.push('/reg');
                    }
                })
            }
        }
    },
}
</script>